/*
 * @Author: SuperLeven levenhan@dingtalk.com
 * @Date: 2025-01-14 17:10:34
 * @LastEditors: SuperLeven levenhan@dingtalk.com
 * @LastEditTime: 2025-01-15 15:31:37
 * @FilePath: /shanghai-pavilion-backstage/src/hooks/useUpload.tsx
 */
import { CopyOutlined, DoubleLeftOutlined, DeleteOutlined, AreaChartOutlined } from "@ant-design/icons";
import { Flex, message, Progress, Tag, Typography, UploadFile } from "antd";
import { useEffect, useState } from "react";
import { convertValue } from "../config";

interface UploadRenderOptions {
  readonly?: boolean;
  dom: any;
}
export const renderImage = (file: UploadFile, action: any, moveTo: any, options: UploadRenderOptions) => {
  if (options.readonly) {
    return options.dom;
  }
  return <div className='lw-image-container absolute' style={{
    border: file.status === 'error' ? "1px solid red" : "1px solid #ddd",
  }}>
    {file.status === 'done' || file.status === 'error' ? <Flex className='top-right ' justify='space-around' align='center' style={{
      width: '100%',
      paddingTop: 3,
    }}>
      <Tag style={{ marginRight: 0 }} color="cyan" onClick={() => {
        const url = file.response.url || file.response.data;
        // 将url复制到剪贴板
        navigator.clipboard.writeText(url).then(() => {
          message.success('复制成功');
        });
      }}><CopyOutlined /></Tag>
      <Tag style={{ marginRight: 0 }} color="processing" onClick={() => {
        moveTo(file, 0)
      }}><DoubleLeftOutlined /></Tag>
      <Tag style={{ marginRight: 0 }} color="red" onClick={() => { action.remove() }}><DeleteOutlined /></Tag>
    </Flex> : null}
    <div className='lw-image-container-inner'
      style={{
        background: file.status === 'done' ? `url('${file.response.url || file.response.data}')` : file.thumbUrl,
      }}
    >
      {file.status === 'error' ? <Typography.Text type='danger'><AreaChartOutlined /> 上传失败</Typography.Text> : null}
      {file.status === 'uploading' ? <Progress type="circle" percent={file.percent} size={60} /> : null}
    </div>
  </div>
}

export interface UploadHookProps {
  initValue?: any[] | string;
  readonly?: boolean;
}

export default (props: UploadHookProps = {}) => {
  const { initValue, readonly } = props;
  const [fileList, setList] = useState<UploadFile[]>([]);
  const setFileList = (newFileList: any) => {
    setList(convertValue(newFileList));
  }

  useEffect(() => {
    setFileList(initValue);
  }, [initValue])
  const onChange = ({ fileList: newFileList }: any) => {
    setList(newFileList);
  };
  const moveTo = (file: UploadFile, index: number) => {
    const currentIndex = fileList.findIndex(item => item.uid === file.uid);
    if (currentIndex !== index) {
      const newFileList = [...fileList];
      newFileList.splice(index, 0, newFileList.splice(currentIndex, 1)[0]);
      setList(newFileList);
    }
  }
  return {
    uploadFileProps: {
      fileList,
      disabled: readonly,
      onChange
    },
    itemRender: (moveTo: any) => {
      return (_dom: any, file: any, _fileList: any, action: any) => {
        return renderImage(file, action, moveTo, { readonly, dom: _dom })
      }
    },
    fileList,
    moveTo,
    setFileList
  }

}
